<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 节点内容不仅可以包含节点本身 也包含文本内容 -->
    <div class="box">
        <p class="p1">不凡学院</p>
        <p class="p2">hello</p>
    </div>
    <!-- value 也算节点内容 -->
    <input class="input" type="text" value="hello">
    <button class="btn1">改变p1内容</button>
    <button class="btn2" onclick="insertPHTML()">插入p标签</button>
    <button onclick="insertInputValue()">插入输入框的内容</button>
    <script>
        var box = document.querySelector('.box');
        var pEl1 = document.querySelector('.p1');
        var inputEl = document.querySelector('.input');
        var btn1 = document.querySelector('.btn1');
        // 获取内容的区别
        // innerText  是显示的内容
        // innerHTML  是html内容
        // console.log('innerText',box.innerText);
        // console.log('innerText',box.innerText);
        // console.log('p1.innerText',pEl1.innerText);
        // console.log('innerHTML',box.innerHTML);
        // // 只有表单元素具有value属性
        // console.log('value',inputEl.value);

        btn1.onclick = function(){
            var text = 'hello,bufan!';
            // 从改变内容来说，innerHTML和innerText是有相同的效果的
            pEl1.innerText = text;
            // pEl1.innerHTML = text;
        }
        /**
        * 插入p标签
        **/
        function insertPHTML(){
            var pStr = '<p>这是插入的p标签</p>';
            // innerTHML 插入的内容会被解析为html
            // innerText 插入的内容会直接显示2
            // 追加
            // box.innerHTML = box.innerHTML+pStr;
            box.innerHTML = box.innerHTML+ pStr;
            // box.innerText = pStr;
        }
        // /**
        // * 从输入框获取内容并插入
        // **/
        function insertInputValue(){
            var pEl1 = document.querySelector('.p1');
            // 希望从输入框获取内容 插入p1
            var inputValue = inputEl.value;
            console.log(inputValue);
            console.log(inputValue)
            // 安全： 注意用户输入的内容 假设都是不安全的，在获取输入框内容并插入的时候尤其要慎重!
            // pEl1.innerText = inputValue;
            pEl1.innerHTML = inputValue;
        }
    </script>
</body>
</html>